{% assign blockId = block_id | default : section.block_id %}
{% assign data = section.settings %}
{%- capture fill_container -%}
  {%- if data.is_fill -%}
    full_container_wrapper
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

<div class="block_banner_list" id="block_banner_list-{{blockId}}">
  <div class="{{ fill_container }}">
    <ul class="list grid gap-2">
      {% for block in section.blocks %}
        <li class="list_item">
          <a href="{{block.link | setUrlDataFrom:data_from}}" class="flex h-full">
            {% include 'lazy_img',src: block.image.src,alt: block.image.alt,class: 'w-full md:block hidden',file_type: 'banner' %}
            {%- capture mobile_img -%}
              {%- if block.mobile_image.src == '' -%}
                {{ block.image.src|public_front_asset_url }}
              {%- else -%}
                {{ block.mobile_image.src|public_front_asset_url }}
              {%- endif -%}
            {%- endcapture -%}
            {% include 'lazy_img',src: mobile_img,alt: block.mobile_image.alt,class: 'w-full md:hidden block',file_type: 'banner' %}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>

<script>
$(function() {
  $(`#block_banner_list-{{blockId}}`).parent().prev().css('margin-bottom', `{{data.margin_top}}px`)
  $(`#block_banner_list-{{blockId}}`).parent().css('margin-bottom', `{{data.margin_bottom}}px`);
})
</script>

{% schema %}
{
  "class": "block_banner_list",
  "is_global": false,
  "icon": "icon-tuwenliebiao",
  "name": {
    "zh_CN": "横幅列表"
  },
  "max_blocks": 10,
  "blocks": [
    {
      "name": {
        "zh_CN": "内容",
        "en_US": "Content"
      },
      "type": "item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "PC端图片",
            "en_US": "PC image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议尺寸：1680*260px",
            "en_US": "Recommended size: 1680*260px"
          },
          "id": "image"
        },
        {
          "type": "card_image",
          "label": {
            "zh_CN": "移动端图片",
            "en_US": "Mobile image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议宽度1000px以上，高度自适应",
            "en_US": "Recommended width more than 1000px, height adaptive"
          },
          "id": "mobile_image"
        },
        {
          "type": "card_page_link",
          "label": {
            "zh_CN": "跳转链接",
            "en_US": "Jump links"
          },
          "default": {
            "type": "",
            "title": "",
            "url": ""
          },
          "id": "link"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill",
			"default": "false"
		}
  ],
  "default": {
    "settings": {
      "is_fill": false
    },
    "blocks": [
      {
        "image": {
          "src": "",
          "alt": ""
        },
        "mobile_image": {
          "src": "",
          "alt": ""
        },
        "link": {
          "type": "",
          "title": "",
          "url": ""
        },
        "block_type": "item"
      }
    ]
  }
}
{% endschema %}
